<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		#box
		{
			background-color: lightblue;
			
			width: 700px;
			height: 80px;
			
			overflow: hidden;
			
			margin: 0px auto;
		}
		img{
			width: 100px;
			height: 80px;
		}
		#inner{
			width: 1900px;
			height: 80px;
		}
	</style>
	<body>
		<div id="box">
			
			<div id="inner">
				<img src="1.jpg" ><img src="2.jpg" ><img src="3.jpg" ><img src="4.jpg" ><img src="5.jpg" ><img src="6.jpg" ><img src="7.jpg" ><img src="8.jpg" ><img src="9.jpg" ><img src="10.jpg" ><img src="11.jpg" ><img src="12.jpg" ><img src="1.jpg" ><img src="2.jpg" ><img src="3.jpg" ><img src="4.jpg" ><img src="5.jpg" ><img src="6.jpg" ><img src="7.jpg" >
			</div>
			
		</div>
		<script type="text/javascript">
			
			var t;
			var n = 10;
			function move()
			{
				if(box.scrollLeft>=1200)
				{
					box.scrollLeft = 0;
				}
				else{
					box.scrollLeft++;
				}
				
				t = setTimeout(move,n);
				
			}
			move();
			box.onmouseover = function()
			{
				clearTimeout(t);
			}
			box.onmouseout = move;
		</script>
	</body>
</html>
